<template>
  <div>
    <!-- 标签 -->
    <Field
      :name="`username.${usernameKey}`"
      :rules="attrs?.rulesArr?.[index] || []"
      :validate-on-blur="false"
      :validate-on-input="true"
    >
      <template #default="{ componentField }">
        <component
          :is="
            _components(
              {
                component: attrs?.components?.[index],
                values: props.values,
                ...attrs,
              },
              componentField,
            )
          "
          v-bind="componentField"
        />
      </template>
    </Field>
    <FormErrorMessage :modelkey="`username.${usernameKey}`" />
  </div>
</template>

<script setup lang="ts">
import { Field } from 'vee-validate';

import { FormErrorMessage } from './index';
import { _components } from './somecomponents.tsx';

const props = defineProps({
  values: {
    type: Object,
    required: true,
  },

  attrs: {
    type: Object,
    required: true,
  },
  usernameKey: {
    type: String,
    required: true,
  },
  index: {
    type: Number,
    required: true,
  },
});
const { usernameKey } = props;
</script>
